<template>
	
<view>
	<image src="/static/images/user_bg.png" class="user-image-bg"></image>
	
	<view class="content">
		
		<view class="flex justify-end">
			<image src="/static/images/user/question.png" 
			class="question-image"
			@click="$wanlshop.auth('/pages/notice/notice')"
			></image>
			
			<image src="/static/images/user/setting.png" 
			class="setting-image"
			@click="$wanlshop.auth('/pages/user/setting/user')"
			></image>
		</view>
		
		<view class="user-box" v-if="user.isLogin">
			<image :src="uesrInfo.avatar" class="avatar"></image>
			<view class="flex flex-direction">
				<text class="nickname">{{ uesrInfo.nickname }}</text>		
				
				<view class="flex align-center justify-start">
					<view class="position-relative" v-if="uesrInfo.vip_text">
						<image src="/static/images/user/level.png" class="level-image"></image>
						<text class="level-title">{{uesrInfo.vip_text}}</text>
					</view>
					
					<view class="position-relative margin-left-sm mybox" v-if="uesrInfo.group_text">
						<!-- <image src="/static/images/user/level.png" class="level-image"></image> -->
						<text class="level-title2">{{uesrInfo.group_text}}</text>
					</view>
				</view>		
				
			</view>
		</view>
		
		<view class="user-box" v-else @click="$wanlshop.auth('/pages/user')">
			<image :src="$wanlshop.oss(user.avatar, 62, 62, 2, 'avatar')" class="avatar"></image>
			<view class="flex flex-direction">
				<text class="nickname">登录 / 注册</text>		
				<view class="cu-tag wanl-bg-pink sm radius">Hi，欢迎登录</view>
			</view>
		</view>
		
		
		<view class="num-box">
			<view class="left-box" @click="$wanlshop.auth('/pages/new/score')">
				<view class="value">{{uesrInfo.money || 0}}</view>
				<view class="title">盐粒</view>
			</view>
			
			<view class="line"></view>
			
			<view class="right-box" @click="$wanlshop.auth('/pages/new/score')">
				<view class="value">{{uesrInfo.ph || 0}}</view>
				<view class="title">茶叶</view>
			</view>
		</view>
		
		<!-- 
		<view class="score-box">
			<view class="score-item-box" @click="$wanlshop.auth('/pages/new/rebuySocre')">
				<view class="score-value">{{uesrInfo.fgjf || 0}}</view>
				<view class="score-title">复购券</view>
			</view>
			
			<view class="score-item-box" @click="$wanlshop.auth('/pages/new/houseScore')">
				<view class="score-value">{{uesrInfo.gfjf || 0}}</view>
				<view class="score-title">购房券</view>
			</view>
		</view> -->
		
		<view class="order-box">
			<view class="flex justify-between">
				<text class="order-title-main">我的订单</text>
				<view class="flex align-center" @tap="$wanlshop.auth('/pages/user/order/order')">
					<text class="order-all">全部订单</text>
					<view class="wlIcon-fanhui2 colorgrey"></view>
				</view>
			</view>
			
			<view class="order-icon">
				<view class="order-item" 
				v-for="(item,index) in categoryList" 
				:key="index"
				@click="$wanlshop.to(item.path)"
				>
					<image :src="item.image" class="order-image"></image>
					<text class="order-title">{{item.name}}</text>
				</view>
				
			</view>
		</view>
		
		<!-- <image src="/static/images/user/banner.png" 
		class="banner-image"
		@click="$wanlshop.to('/pages/new/scoreShop')"
		></image> -->
		
		<view class="order-box2">
			<view class="flex justify-between">
				<text class="order-title-main">其他服务</text>
			</view>
			
			<view class="order-icon">
				<view class="order-item" v-for="(item,index) in otherList" :key="index"
				@click="jumpOther(item)"
				>
					<image :src="item.image" class="order-image"></image>
					<text class="order-title">{{item.name}}</text>
				</view>
				
			</view>
		</view>
		
	</view>
	
	<wanl-modal custom :show="showModal" width="93%" padding="30rpx">
		<view class="modal-body">
			<view class="flex align-center justify-center">
				<view class="modal-title">下载app</view>
				<image src="/static/images/close.png" class="close-image" @click="closeModel"></image>
			</view>
			
			<view class="modal-content">
				<image :src="uesrInfo.app_dow" class="qrcode-image"></image>
				
				<view class="qrcode-btn" @click="saveImage(uesrInfo.app_dow)">长按图片保存</view>
			</view>
		</view>
	</wanl-modal>
	
</view>	
	
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			showModal:false,
			dataList:[],
			categoryList:[
				{
					image:'/static/images/user/1.png',
					name:'待支付',
					path:'/pages/user/order/order?state=1',
				},
				{
					image:'/static/images/user/2.png',
					name:'待发货',
					path:'/pages/user/order/order?state=2',
				},
				{
					image:'/static/images/user/3.png',
					name:'待收货',
					path:'/pages/user/order/order?state=3',
				},
				{
					image:'/static/images/user/4.png',
					name:'待评价',
					path:'/pages/user/order/order?state=4',
				},
				{
					image:'/static/images/user/5.png',
					name:'退款/售后',
					path:'/pages/user/refund/lists',
				}
			],
			otherList:[
				{
					image:'/static/images/user/friend.png',
					name:'邀请好友',
					path:'/pages/user/qrcode/qrcode',
					auth:true,
				},
				{
					image:'/static/images/user/team.png',
					name:'我的团队',
					path:'/pages/new/myTeam',
					auth:true,
				},
				{
					image:'/static/images/user/address.png',
					name:'收货地址',
					path:'/pages/user/address/address',
					auth:true,
				},
				{
					image:'/static/images/user/help.png',
					name:'帮助中心',
					path:'/pages/user/help',
					auth:false,
				},
				{
					image:'/static/images/user/download.png',
					name:'下载app',
					path:'',
					auth:false,
				},
				{
					image:'/static/images/user/setting2.png',
					name:'设置',
					path:'/pages/user/setting/setting',
					auth:true,
				}
			],
			uesrInfo:{},
		}
	},
	computed: {
		...mapState(['user', 'statistics','common'])
	},
	onLoad() {
	},
	onPullDownRefresh() {
		this.loadData();
	},
	onShow() {
		this.loadData();
	},
	methods: {
		async loadData() {
			await uni.request({
				url: '/user/userinfo',
				method: 'GET',
				success: res => {
					this.uesrInfo = res.data
				}
			});
			
			uni.stopPullDownRefresh();
		},
		jumpOther(item){
			if(item.name == '下载app'){
				this.showModal = true;
				return false;
			}
			
			if(item.auth){
				this.$wanlshop.auth(item.path);
			}else{
				this.$wanlshop.to(item.path);
			}
		},
		closeModel(){
			this.showModal = false;
		},
		saveImage(qrcode_img){
			
			// #ifdef H5
			this.$wanlshop.msg('长按图片保存');
			return false;
			// #endif
			
			uni.saveImageToPhotosAlbum({
				filePath: qrcode_img,
				success: (res) => {
					uni.showToast({
					title: "已存至系统相册",
					icon: "success",
					  });
				},
				fail: (res) => {
				  uni.showToast({
					title: "保存失败",
					icon: "error",
				  });
				},
			});
		
	  
		}
	}
}	
</script>



<style scoped lang="scss">
.user-image-bg{
	width: 750rpx;
	height: 1350rpx;
}	
.content{
	position: absolute;
	top: 88rpx;
	left: 0rpx;
	width: 100%;
	padding: 0rpx 24rpx;
}	
.question-image{
	width: 42rpx;
	height: 42rpx;
	margin-right: 28rpx;
}
.setting-image{
	width: 42rpx;
	height: 42rpx;
}

.avatar{
	width: 108rpx;
	height: 108rpx;
	margin-right: 21rpx;
	border-radius: 50%;
}

.nickname{
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
	margin-bottom: 16rpx;
}
.level-image{
	width: 122rpx;
	height: 50rpx;
}

.level-title{
	font-size: 22rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #FFFFFF;
	position: absolute;
	left: 50rpx;
	top: 6rpx;
}

.mybox{
	height: 50rpx;
}

.level-title2{
	font-size: 22rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #ffffff;
	//border: 2rpx solid #366BEB;
	background-color: #366BEB;
	padding: 8rpx 20rpx;
	border-radius: 30rpx;
}

.user-box{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.num-box{
	margin-top: 42rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.left-box{
	display:flex;
	flex-direction: column;
	width: 350rpx;
	align-items: center;
}

.right-box{
	display:flex;
	flex-direction: column;
	width: 350rpx;
	align-items: center;
}

.value{
	font-size: 44rpx;
	font-family: D-DIN Exp;
	font-weight: 700;
	color: #292929;
}

.title{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
	margin-top: 20rpx;
}

.line{
	width: 1rpx;
	height: 76rpx;
	background: #CCCCCC;
}

.score-box{
	width: 702rpx;
	height: 175rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin-top: 38rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 53rpx;
	padding-right: 53rpx;
}

.score-value{
	font-size: 36rpx;
	font-family: D-DIN Exp;
	font-weight: 700;
	color: #292929;
}

.score-title{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
	margin-top: 26rpx;
}

.score-item-box{
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 50%;
}

.order-box{
	margin-top: 20rpx;
	width: 702rpx;
	height: 215rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 27rpx 29rpx;
}

.order-box2{
	width: 702rpx;
	height: 342rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 27rpx 29rpx;
	margin-top: 20rpx;
}

.order-title-main{
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
}

.order-image{
	width: 48rpx;
	height: 48rpx;
}

.order-title{
	font-size: 22rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
	margin-top: 23rpx;
}

.order-icon{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 32rpx;
	flex-wrap: wrap;
}

.order-item{
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 20%;
	margin-bottom: 36rpx
}

.colorgrey{
	color: #878787;
}

.order-all{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #868686;
	line-height: 18rpx;
	margin-right: 4rpx;
	padding-bottom: 4rpx;
}

.banner-image{
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	width: 712rpx;
	height: 155rpx;
}

.modal-body{
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding-bottom: 20rpx;
}

.modal-title{
	font-size: 32rrpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
}
.close-image{
	width: 42rpx;
	height: 42rpx;
	position: absolute;
	top: 30rpx;
	right: 28rpx;
}
.modal-content{
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.qrcode-image{
	width: 100%;
}

.qrcode-btn{
	width: 165px;
	height: 38px;
	line-height: 38px;
	background: $MAIN_COLOR;
	border-radius: 19px;
	font-size: 15px;
	font-weight: 500;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 60rpx;
}
</style>